<template>
  <v-app app>
    <TopBar />
    <v-main class="grey lighten-3">
      <v-container>
        <iframe class="sukura" id="iframe" src="http://v.bootstrapmb.com/2019/4/c5mp24431" frameborder="0" width="100%" height="1336px"></iframe>
        <v-row class="myIntroduction">
          <v-col cols="3">
            <Nav />
          </v-col>
          <v-col class="myArticleList">
            <v-sheet min-height="80vh" rounded="lg">
              <router-view />
            </v-sheet>
          </v-col>
        </v-row>
      </v-container>
    </v-main>

    <Footer />
  </v-app>
</template>

<script>
import TopBar from 'components/TopBar'
import Footer from 'components/Footer'
import Nav from 'components/Nav'

export default {
  components: {
    TopBar,
    Footer,
    Nav,
  },
}
</script>

<style scoped>
.sukura{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
}

.myIntroduction{
  opacity:0.7;
}

.myArticleList{
  z-index: 1;
  opacity:0.9;
}
</style>
